<?php

use yii\helpers\Html;

?>
<!DOCTYPE html>
<html style="height: 100%; font-size: 10px;" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta name="viewport" content="initial-scale=1,user-scalable=no">
    <link rel="icon" href="http://app.mengzhuly.info/personal/favicon.ico">
    <link rel="apple-touch-icon" href="http://app.mengzhuly.info/personal/apple-touch-icon.png">
    <title>萌猪乐园</title>

    <style type="text/css">body, ul, li {
            padding: 0;
            margin: 0
        }

        li {
            list-style: none
        }

        #beecloud-pay {
            width: 100%;
            height: 100%;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.pay-list-bg.png?8) repeat;
            position: fixed;
            left: 0;
            top: 0;
            text-align: center;
            z-index: 9998;
            display: none
        }

        #beecloud-pay.open {
            display: block
        }

        #beecloud-pay-list {
            width: 280px;
            margin: 0 auto;
            padding: 30px 20px 20px;
            position: fixed;
            background-color: #fff;
            text-align: center;
            box-shadow: 0 0 8px #999;
            z-index: 9999
        }

        .beecloud-pay-btn {
            width: 100%;
            height: 45px;
            background-color: #f1f1f1;
            margin: 5px 0;
            cursor: pointer;
            font-size: 18px;
            font-family: "Microsoft YaHei";
            display: inline-block;
            line-height: 45px;
            text-align: center;
            font-weight: 700
        }

        .beecloud-pay-btn span {
            display: inline-block;
            text-align: center;
            width: 124px;
            vertical-align: middle
        }

        .beecloud-pay-close {
            width: 30px;
            height: 30px;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.close3.png?8) center no-repeat;
            position: absolute;
            right: 0;
            top: 0;
            cursor: pointer
        }

        .beecloud-pay-btn.channel-un i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.un.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-un i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.un.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-unwap i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.un.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-unwap i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.un.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-ali i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.ali.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-ali i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.ali.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-wxmp i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-wxmp i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-bcwxmp i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-bcwxmp i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-wx i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-wx i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-bcwx i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-bcwx i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-wxwap i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-wxwap i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-bcwxwap i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-bcwxwap i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.wx.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-jd i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.jd.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-jd i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.jd.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-bd i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.bd.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-bd i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.bd.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-yee i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.yb.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-yee i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.yb.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-kuaiqian i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.kq.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-kuaiqian i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.kq.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-bckj i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.un.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-bckj i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.un.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-bcaliqr i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.ali.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-bcaliqr i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.ali.png?8) center no-repeat;
                background-size: contain
            }
        }

        .beecloud-pay-btn.channel-bcali i {
            display: inline-block;
            width: 40px;
            height: 30px;
            vertical-align: middle;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.ali.png?8) center no-repeat;
            background-size: contain
        }

        @media (max-width: 450px) {
            .beecloud-pay-btn.channel-bcali i {
                display: inline-block;
                width: 35px;
                height: 28px;
                vertical-align: middle;
                background: url(https://bcjspay.beecloud.cn/v3.ui3.ali.png?8) center no-repeat;
                background-size: contain
            }
        }

        #beecloud-pay .beecloud-wx {
            padding: 35px;
            width: 250px;
            height: 250px;
            margin: 0 auto;
            background-color: #fff;
            position: relative
        }

        #beecloud-pay-loading {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            text-align: center;
            border-radius: 8px;
            background: url(https://bcjspay.beecloud.cn/v3.ui3.loading.gif?8) center no-repeat;
            background-size: 30px 30px
        }

        @media (max-width: 450px) {
            #beecloud-pay-list {
                width: 100%;
                box-shadow: none;
                padding: 15px 0;
                position: fixed;
                left: 0;
                bottom: 0;
                -webkit-animation: payListMove .5s ease-in-out 0s alternate
            }

            @-webkit-keyframes payListMove {
                0% {
                    bottom: -500px
                }
                100% {
                    bottom: 0
                }
            }.beecloud-pay-btn {
                 width: 90%;
                 height: 40px;
                 line-height: 40px;
                 font-size: 18px
             }

            .beecloud-pay-close {
                display: none
            }
        }</style>
    <script>if (document.documentElement.clientWidth > 600) {
            document.documentElement.style.fontSize = 6000 / 375 + 'px'
        } else {
            document.documentElement.style.fontSize = document.documentElement.clientWidth * 10 / 375 + 'px'
        }</script>


    <?= Html::jsFile('@web/static/js/jquery-3.5.1.min.js') ?>
    <?= Html::cssFile('@web/static/site/app.css') ?>
    <?= Html::cssFile('@web/static/site/chunk-vendors.css') ?>

    <style type="text/css">.infinite-loading-container[data-v-358985eb] {
            clear: both;
            text-align: center
        }

        .infinite-loading-container[data-v-358985eb] [class^=loading-] {
            display: inline-block;
            margin: 5px 0;
            width: 28px;
            height: 28px;
            font-size: 28px;
            line-height: 28px;
            border-radius: 50%
        }

        .btn-try-infinite[data-v-358985eb] {
            margin-top: 5px;
            padding: 5px 10px;
            color: #999;
            font-size: 14px;
            line-height: 1;
            background: transparent;
            border: 1px solid #ccc;
            border-radius: 3px;
            outline: none;
            cursor: pointer
        }

        .btn-try-infinite[data-v-358985eb]:not(:active):hover {
            opacity: .8
        }</style>
</head>
<body style="margin: 0 auto; padding: 0; font-size: 1.3rem; width:37.5rem; height: 100%;font-family: 微软雅黑">
<noscript><strong>We're sorry but huzhu_vue_app doesn't work properly without JavaScript enabled. Please enable it to
        continue.</strong></noscript>
<div id="app"><!---->
    <div data-v-9cc1e82a="" id="view">
        <div data-v-9cc1e82a="" class="views">
            <div data-v-1f85a624="" data-v-9cc1e82a="" class="appeal">
                <div data-v-5044dc97="" data-v-1f85a624="" class="publicHeader">
                    <a data-v-5044dc97="" href="<?= \yii\helpers\Url::toRoute('site/pay-account')?>"><i data-v-5044dc97="" class="iconfont icon-fanhui-"></i></a>
                    <div data-v-5044dc97="" scop="">添加账户</div>
                    <div data-v-5044dc97=""><!----></div>
                </div>

                <div data-v-1f85a624="">
                    <div data-v-1f85a624="" class="van-cell van-field">
                        <div class="van-cell__title van-field__label"><span>账户类型</span></div>
                        <div class="van-cell__value van-field__value">
                            <div class="van-field__body">
                            </div>
                        </div>
                    </div>
                    <div data-v-1f85a624="" class="van-cell van-field">
                        <div class="van-cell__title van-field__label"><span>账户类型</span></div>
                        <div class="van-cell__value van-field__value">
                            <div class="van-field__body">
                                <select name="" id="account_type" class="van-field__control van-field__control--right">
                                    <option value="0">请输入账号</option>
                                    <option value="2">支付宝</option>
                                    <option value='1'>银行卡</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div data-v-1f85a624="" class="van-cell van-field">
                        <div class="van-cell__title van-field__label"><span>账号</span></div>
                        <div class="van-cell__value van-field__value">
                            <div class="van-field__body">
                                <input type="text" placeholder="请输入账号"
                                       class="van-field__control van-field__control--right" id="account_number">
                            </div>
                        </div>
                    </div>
                    <div data-v-1f85a624="" class="van-cell van-field">
                        <div class="van-cell__title van-field__label"><span>真实姓名</span></div>
                        <div class="van-cell__value van-field__value">
                            <div class="van-field__body"><input type="text" placeholder="请输入真实姓名"
                                                                class="van-field__control van-field__control--right"
                                                                id="real_name">
                            </div>
                        </div>
                    </div>
                    <div data-v-1f85a624="" class="van-cell van-field">
                        <div class="van-cell__title van-field__label"><span>联系电话</span></div>
                        <div class="van-cell__value van-field__value">
                            <div class="van-field__body"><input type="text" placeholder="请输入联系电话"
                                                                class="van-field__control van-field__control--right"
                                                                id="mobile">
                            </div>
                        </div>
                    </div>
                    <div data-v-1f85a624="" class="van-cell van-field" style="display: none;" id="bankCard">
                        <div class="van-cell__title van-field__label"><span>开户行</span></div>
                        <div class="van-cell__value van-field__value">
                            <div class="van-field__body"><input type="text" placeholder="请输入开户行"
                                                                class="van-field__control van-field__control--right"
                                                                id="mark">
                            </div>
                        </div>
                    </div>
                    <div data-v-1f85a624="" class="van-cell van-field" id="alipy_img">
                        <div class="van-cell__title van-field__label"><span>收款二维码</span></div>
                        <div class="van-cell__value van-field__value">
                            <div class="van-field__body">
                                <div class="van-field__control van-field__control--right van-field__control--custom">
                                    <div data-v-1f85a624="" class="van-uploader">
                                        <div class="van-uploader__wrapper">
                                            <div class="van-uploader__upload" id="img_url"><i
                                                        class="van-icon van-icon-photograph van-uploader__upload-icon">
                                                    <!----></i><input type="file" accept="image/*"
                                                                      class="van-uploader__input" id="uploadImg"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div data-v-1f85a624="" style="margin: 1.6rem;">
                        <button data-v-1f85a624="" id="addToAccount"
                                class="van-button van-button--primary van-button--normal van-button--block van-button--square"
                                style="color: rgb(255, 255, 255); background: rgb(255, 205, 88) none repeat scroll 0% 0%; border-color: rgb(255, 205, 88);"><span
                                    data-v-1f85a624="" class="van-button__text">
                                <input type="hidden" id="alipay_account_img">
        提 交</span></button>
                    </div>
                </div><!----></div>
        </div><!----></div>
    <audio src="" autoplay="autoplay" id="audio"></audio>
</div>
</body>
<script>
    $(document).on('change', '#account_type', function (e) {
        var account_type = $(this).val();
        if (account_type == 2) {
            $("#alipy_img").show();
            $("#bankCard").hide();
        } else if (account_type == 1) {
            $("#alipy_img").hide();
            $("#bankCard").show();
        }
    })

    $(document).on('change', '#uploadImg', function () {
        var formData = new FormData();
        formData.append('file', document.getElementById('uploadImg').files[0]);
        formData.append('_csrf', '<?= Yii::$app->request->csrfToken?>')
        $.ajax({
            url: "<?= \yii\helpers\Url::toRoute('site/ajax-upload')?>",
            type: 'POST',
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            dataType: "json",
            success: function (data) {
                if (data.code == 200) {
                    $("#img_url").html('<img src="' + data.data.img_url + '">');
                    $("#alipay_account_img").val(data.data.img_url);
                }
            },
            error: function (msg) {
                alert(msg);
            }
        });
    });

    //提交
    $(document).on('click', '#addToAccount', function (e) {
        var type = $("#account_type").val();
        var account_number = $("#account_number").val();
        var real_name = $("#real_name").val();
        var mobile = $("#mobile").val();
        var mark = $("#mark").val();
        var alipay_img = $('#alipay_account_img').val();
        if (type == 0) {
            alert('请选择账户类型');
            return false;
        }

        if (account_number == '' || account_number == null || account_number == undefined) {
            alert('请输入账号');
            return false;
        }

        if (real_name == '' || real_name == null || real_name == undefined) {
            alert('请输入真实姓名');
            return false;
        }

        if (mobile == '' || mobile == null || mobile == undefined) {
            alert('请输入手机号');
            return false;
        }


        if (type == 1) {
            if (mark == '' || mark == null || mark == undefined) {
                alert('开户行必填');
            }
            alipay_img = 1;
        } else {
            if (alipay_img == '' || alipay_img == null || alipay_img == undefined) {
                alert('请上传支付宝二维码');
            }
            mark = 1;
        }

        $.post("<?= \yii\helpers\Url::toRoute('site/add-pay-account')?>", {
            _csrf: "<?= Yii::$app->request->csrfToken?>",
            type: type,
            account_number: account_number,
            real_name: real_name,
            mobile: mobile,
            mark: mark,
            alipay_img: alipay_img
        }, function (data) {
            if (data.code == 200) {
                alert(data.msg);
                location.href = '/site/pay-account';
            } else {
                alert(data.msg);
            }
        })
    })

</script>
</html>